<template>
    <div class="detail">
        <div class="farm">
            <div class="detail-top">
                <h1>{{ agritainmentData.title }}</h1>
                <div class="time" v-if="type != 1">发布时间：{{ time }}</div>
            </div>
            <div class="policy" v-if="type == 1">
                <div class="time">发布时间：{{ time }}</div>
                <div class="good">
                    <span>点赞：{{ number }}</span>
                    <i :class="light ? 'el-icon-star-off' : 'el-icon-star-on'" @click="changeColor"></i>
                </div>
            </div>
            <div class="content" v-html="agritainmentData.content">

            </div>
        </div>
        <div class="suggest" v-if="type == 1">
            <!-- 建议组件区域 -->
            <Advice @submit="submit"></Advice>
            <!-- 评论区域 -->
            <Comments :userInfo="userInfo" v-for="item in commentsList" :key="item.id" :comments="item"
                @addComments="addComments"></Comments>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import Advice from './advice/index'
import Comments from './comments/index'
export default {
    name: 'Detail',
    components: {
        Advice,
        Comments
    },
    mixins: [],
    props: [],
    data() {
        return {
            agritainmentData: {},
            light: true,
            commentsList: []
        }
    },
    computed: {
        ...mapState('userStore', ['userInfo', 'token']),
        time() {
            return this.agritainmentData.createdDt ? (this.agritainmentData.createdDt.slice(0, 10)) : this.agritainmentData.createdDt
        },
        type() {
            return this.$route.query.type
        },
        number() {
            return this.agritainmentData.collectUserList?.length
        }
    },
    watch: {

    },
    mounted() {
        // this.getAgritainmentData()
        // this.getHelpPoorData()
        this.getData()
        // 评论
        this.getCommentsList()
    },
    methods: {
        getData() {
            if (this.$route.query.type) {
                this.getHelpPoorData()
            } else {
                this.getAgritainmentData()
            }
        },
        // 农家乐信息
        getAgritainmentData() {
            this.request.post('/farmInfo/selectFarmInfoPage', {}).then(res => {
                if (res.code == 20000) {
                    let id = this.$route.query.id
                    res.data.list.map(item => {
                        if (item.id == id) {
                            this.agritainmentData = item
                        }
                    })
                }
            })
        },
        // 扶贫资讯、政策
        getHelpPoorData() {
            // /helpPoorInfo/selectHelpPoorInfoPage
            this.request.post('/helpPoorInfo/selectHelpPoorInfoPage', { type: this.$route.query.type }).then(res => {
                if (res.code == 20000) {
                    let id = this.$route.query.id
                    res.data.list.map(item => {
                        if (item.id == id) {
                            this.agritainmentData = item
                            // 判断点赞列表中给是否有该用户
                            item.collectUserList.forEach(i => {
                                if (i.userId === this.userInfo.userId) {
                                    this.light = false
                                }
                            })
                        }
                    })
                }
            })
        },
        submit(content) {
            if (!this.token) {
                this.$confirm('请先登录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$bus.$emit('show', true)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            } else {
                // 判断发表内容是否为空
                if (content.trim() === '') {
                    this.$message({
                        type: 'error',
                        message: '发表内容不能为空！'
                    })
                } else {
                    // 发表评论
                    const obj = {
                        content: content,
                        infoId: this.$route.query.id,
                        commentType: 0
                    }
                    this.addComments(obj)
                    this.$message({
                        type: 'success',
                        message: '评论成功！'
                    })
                }
            }
        },
        changeColor() {
            // 修改当前政策的点赞状态
            this.light = !this.light
            this.request.put(`/collection/collectionAdd?infoId=` + this.agritainmentData.id).then(res => {
                if (res.code == 20000) {
                    // 重新获取点赞数量
                    this.getHelpPoorData()
                }
            })
        },
        // 评论新增
        addComments(obj) {
            this.request.post('/commentInfo/commentAdd', obj).then(res => {
                if (res.code == 20000) {
                    this.getCommentsList()
                }
            })
        },
        // 获取评论列表
        getCommentsList() {
            this.request.get('/commentInfo/commentList?infoId=' + this.$route.query.id).then(res => {
                if (res.code == 20000) {
                    this.commentsList = res.data
                }
            })
        }

    }
};
</script>
<style lang='less' scoped>
.detail {
    width: 70%;
    margin: 0 auto;
    padding-bottom: 100px;

    .farm {
        .detail-top {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 50px;

            h1 {
                font-size: 22px;

            }

            .time {
                font-size: 14px;
                color: #7f7f7f;
                margin-left: 50px;
            }

        }
    }

    .policy {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 40px;
        font-size: 14px;
        color: #7f7f7f;
        margin-bottom: 20px;



        .time {
            margin-right: 50px;
        }

        .good {
            span {
                margin-right: 5px;
            }

            .el-icon-star-off {
                color: #000 !important;
                font-size: 22px !important;
            }

            .el-icon-star-on {
                color: rgb(230, 17, 17) !important;
                font-size: 24px !important;
            }
        }
    }

    .text {
        width: 100%;
        height: 70px;
        line-height: 70px;
    }

    .content {
        background-color: white;
    }
}
</style>